<template>
  <div id="app">
    <!--头部导航-->
    <mt-header  title="信息管理系统"></mt-header>
    <!--中间路由跳转区域-->
    <router-view></router-view>
    <!--底部tabbar-->
      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="home">
          <img @click="changeHash" slot="icon" src="./assets/img/index.png">
          首页
        </mt-tab-item>
        <mt-tab-item id="member">
          <img  @click="changeHash" slot="icon" src="./assets/img/vip.png">
          会员
        </mt-tab-item>
        <mt-tab-item id="shopcart">
          <img @click="changeHash" slot="icon" src="./assets/img/shopcart.png">
          购物车
        </mt-tab-item>
        <mt-tab-item id="search">
          <img @click="changeHash" slot="icon" src="./assets/img/search.png">
          查找
        </mt-tab-item>
      </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
  	return {
  		selected:''
    }
  },
  methods:{
  	changeHash(){
  		this.$nextTick(() =>{
  			console.log(this.selected);
  			this.$router.push({
          name:this.selected
        })
      })
    }
  }
 /* watch:{
  	selected(newV , oldV){
		  console.log(this);
		  this.$router.push({
        name:newV
      })
	  }
  }*/
}
</script>

<style>
/*#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}*/
</style>
